import React, { Component } from "react";
import Lunbo from "../../../component/Lunbo";
import "../../../assets/styles/datas.css";
import Fenbut from "./fenbut";
import Biaodan from "./biaodan";
class Index extends Component {
  state = {
    shuzi: "",
    zhuz1: 50,
    zhuz2: 50,
    zhuz3: 40,
    zhuz4: 40,
    zhuz5: 150,
    zhuz6: 200,
    zhuz7: 40,
    zhuz8: 120,
    zhuz9: 170,
    zhuz10: 10,
    zhuz11: 10,
    zhuz12: 150,
  };
  render() {
    return (
      <div className="hujde">
        <div className="daping">
          <Lunbo />
          <div className="cebian">
            <div className="spans">实时数据信息</div>
            <ul className="shishij">
              <li style={{ backgroundColor: "#4C78F5", color: "#fff" }}>
                <p>室内温度</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz1))}°C
              </li>
              <li style={{ backgroundColor: "#1FCAB8", color: "#fff" }}>
                <p>室内湿度</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz2))}°C
              </li>
              <li>
                <p>室外温度</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz3))}°C
              </li>
            </ul>
            <ul className="shishij">
              <li>
                <p>室外湿度</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz4))}°C
              </li>
              <li>
                <p>光照强度</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz5))}lux
              </li>
              <li>
                <p>氮</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz6))}
              </li>
            </ul>
            <ul className="shishij">
              <li>
                <p>氦</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz7))}
              </li>
              <li>
                <p>磷</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz8))}
              </li>
              <li>
                <p>钾</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz9))}
              </li>
            </ul>
            <ul className="shishij">
              <li>
                <p>PH</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz10))}
              </li>
              <li>
                <p>EC</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz11))}
              </li>
              <li>
                <p>CO₂</p>
                {(this.shuzi = Math.ceil(Math.random() * this.state.zhuz12))}°C
              </li>
            </ul>
          </div>
        </div>
        <div className="shuliy"> <Fenbut /> </div>
        <div className="baido">
<Biaodan/>
        </div>
      </div>

    );
  }
}

export default Index;
